<template>
  <section class="section">
    <div class="container">
      <h2 class="section-title">最新资讯</h2>
      <p class="section-desc">了解行业动态，把握市场先机</p>
      
      <div class="news-grid">
        <div class="news-card" v-for="(item, index) in newsItems" :key="index">
          <div class="news-image">
            <img :src="item.image" :alt="item.title">
          </div>
          <div class="news-content">
            <h3>{{ item.title }}</h3>
            <p class="news-text">{{ item.text }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'NewsGrid',
  data() {
    return {
      newsItems: [
        { 
          title: '行业动态1', 
          text: '这里是行业动态1的内容简介...',
          image: 'https://via.placeholder.com/400x200'
        },
        { 
          title: '行业动态2', 
          text: '这里是行业动态2的内容简介...',
          image: 'https://via.placeholder.com/400x200'
        },
        { 
          title: '行业动态3', 
          text: '这里是行业动态3的内容简介...',
          image: 'https://via.placeholder.com/400x200'
        }
      ]
    }
  }
}
</script>

<style scoped>
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.news-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.news-card:hover {
  transform: translateY(-10px);
}

.news-image {
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-image img {
  transform: scale(1.1);
}

.news-content {
  padding: 20px;
}

.news-content h3 {
  margin-bottom: 10px;
  color: #053a70;
}

.news-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
</style>